// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NativeEventEmitter, ScrollView, TextInput, NativeModules, Platform, StyleSheet, Text, View, Image, TouchableHighlight, Alert, Switch, ImageBackground } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import axios from 'axios';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { positionDetail } from '../../module/module.js'

// 引入样式
import Style from './style.js';

// 引入公用组件
import { Layout, NavBar, Title, NetInfoScene, Results, RefreshScrollView, ScrollableTabBar } from '../../components/index.js'

// 引入专用组件
import { } from './components/index.js'

// 引入工具包

import { nblogo, classDefault } from '../../util/images.js'
import { size, longitude, latitude, ScreenWidth } from '../../util/utils.js'
import { TouchableOpacity } from 'react-native-gesture-handler';



class PositionDetails extends Component {

  constructor(props) {
    super(props)
    this.state = {
      detail: {}
    }

  }


  componentDidMount() {
    const { id, userId, exchangeId } = this.props
    this.loading = Toast.loading('加载中', 0)
    positionDetail({ id, userId, exchangeId }).then(res => {
      console.log(res)
      this.setState({
        detail: res.data
      })
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  componentWillMount() {

  }

  render() {
    const { detail } = this.state
    return (
      <Layout style={{ backgroundColor: '#0A0C21' }} statusStyle={{}}>
        <NavBar
          type="transparent"
          title="仓位详情"
          back={true}
          extra={<Image resizeMode='cover' style={{ width: 24, height: 24 }} source={require('../../static/images/icon-sherd.png')} />}
          extraOnPress={() => {

          }}
        />
        <ScrollView>
          {detail && (
            <View style={{ marginTop: 16, }}>
              {/* <View style={{ backgroundColor: '#334185', paddingTop: .5, marginBottom: 16, marginHorizontal: 12, borderRadius: 8 }}>
                <View style={{ backgroundColor: '#232B54', flexDirection: 'row', alignItems: 'flex-start', padding: 12, borderRadius: 8 }}>
                  <TouchableOpacity onPress={() => Actions.userInfo()}>
                    <View style={{ width: 44, height: 44, position: 'relative' }}>
                      <Image resizeMode='cover' style={{ position: 'absolute', width: 18, height: 15, top: -7, left: -1.5 }} source={require('../../static/images/icon-hot.png')} />
                      <View style={{}}>
                        <Image resizeMode='cover' source={require('../../static/images/tx.png')} style={{ width: 44, height: 44, borderRadius: 22, backgroundColor: '#fff' }} />
                      </View>
                    </View>
                  </TouchableOpacity>
                  <View style={{ marginLeft: 15 }}>
                    <View style={{ marginBottom: 8, flexDirection: 'row', }}>
                      <Text style={{ fontSize: 14, color: '#E4E4E4', lineHeight: 20, }}>肥宅比特币</Text>
                      <View style={{ marginLeft: 12, paddingHorizontal: 8, paddingVertical: 3, borderWidth: .5, borderRadius: 2, borderColor: '#7484FF' }}>
                      <Text style={{ fontSize: 10, color: '#7484FF', lineHeight: 14, height: 14 }}>已关注</Text>
                    </View>
                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                      <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, }}>大暴跌，你无法想象</Text>
                    </View>
                  </View>
                </View>
              </View> */}
              <View style={{ marginHorizontal: 12, borderRadius: 8, overflow: 'hidden', backgroundColor: '#10142D', paddingTop: .5, marginTop: 0, marginBottom: 8 }}>
                <View style={{ backgroundColor: '#181E3A', }}>
                  <View style={{ backgroundColor: '#10142D', borderRadius: 0, }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 12 }}>
                      {detail.direction == 'buy' && (
                        <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#FF5757', borderRadius: 2, }}>
                          <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>单{detail.buyMultiple || 0}倍</Text>
                        </View>
                      )}
                      {detail.direction == 'sell' && (
                        <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#FF5757', borderRadius: 2, }}>
                          <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>空{detail.sellMultiple || 0}倍</Text>
                        </View>
                      )}
                      <Text style={{ flex: 1, fontSize: 14, color: '#fff', lineHeight: 20, marginLeft: 12 }}>{detail.symbol} {detail.contractType}</Text>
                      <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#7484FF', borderRadius: 2, }}>
                        {detail.status == 1 && (
                          <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>持</Text>
                        )}
                        {detail.status == 2 && (
                          <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>平</Text>
                        )}
                      </View>
                    </View>
                  </View>
                </View>
                <View style={{ height: .5, backgroundColor: '#232B54', marginHorizontal: 12 }}></View>
                <View style={{ backgroundColor: '#10142D', height: 65, flexDirection: 'row', alignItems: 'center', }}>
                  <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                    <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>开仓均价</Text>
                    <Text style={{ fontSize: 14, color: '#FFFFFF', lineHeight: 20, }}>≡{detail.costOpen}</Text>
                  </View>
                  <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                    <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>收益率</Text>
                    <Text style={{ fontSize: 14, color: '#07C69A', lineHeight: 20, }}>{detail.profitRate * 10 || 0}%</Text>
                  </View>
                </View>
                <View style={{ height: .5, backgroundColor: '#232B54', marginHorizontal: 12 }}></View>
                <View style={{ paddingHorizontal: 12, paddingVertical: 6 }}>
                  <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 10 }}>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>收益</Text>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>${detail.profit || 0}</Text>
                  </View>
                  <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 10 }}>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>未实现盈亏</Text>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>{detail.profitUnreal}</Text>
                  </View>
                  <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 10 }}>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>持仓量</Text>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>{detail.volume}</Text>
                  </View>
                  <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 10 }}>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>仓位价值</Text>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>{detail.costOpen}</Text>
                  </View>
                  <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 10 }}>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>保证金</Text>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>${detail.positionMargin || 0}</Text>
                  </View>
                  <View style={{ marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 10 }}>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>预计爆仓价</Text>
                    <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, }}>≡{detail.lastPrice}</Text>
                  </View>
                </View>
                <View style={{ height: .5, backgroundColor: '#232B54', marginHorizontal: 12 }}></View>
                <View style={{ paddingHorizontal: 12, paddingVertical: 6 }}>
                  {detail.orders && detail.orders.map((item, index) => {
                    return (
                      <View style={{ marginVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }}>
                        <View style={{ marginRight: 13, width: 18, height: 18, justifyContent: 'center', alignItems: 'center', borderWidth: .5, borderStyle: 'solid', borderColor: '#00C898', borderRadius: 2 }}>
                          {item.offset == 'open' && (<Text style={{ fontSize: 10, color: '#00C898', lineHeight: 14, }}>开</Text>)}
                          {item.offset == 'close' && (<Text style={{ fontSize: 10, color: '#00C898', lineHeight: 14, }}>平</Text>)}
                        </View>
                        <View style={{ flex: 2 }}>
                          <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 16, }}>{item.created}</Text>
                        </View>
                        <View style={{ flex: 2 }}>
                          <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 16, }}>≡{item.price}</Text>
                        </View>
                        <View style={{ flex: 1 }}>
                          <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 16, }}>-</Text>
                        </View>
                        <View style={{ flex: 1 }}>
                          <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 16, textAlign: 'right' }}>{item.volume}</Text>
                        </View>
                      </View>
                    )
                  })}
                </View>
              </View>
            </View>
          )}
        </ScrollView>
      </Layout>
    );
  }
}



export default connect(({ userInfo, }) => ({
  userInfo,
}))(pureRender(PositionDetails))
